<template>
  <div class="app-container" :style="{height:appMain.height+'px'}">
    <!--向导窗口-->
    <div class="guide-box">
      <!--标题-->
      <div class="content-title">
        <i class="el-icon-milk-tea"></i>
        <span>移动端设计向导</span>
      </div>
      <!--菜单设计类型-->
      <div class="body" v-if="designStep=='home'">
        <!--创建CRUD-->
        <div class="title-box">
          <div class="item-title">创建新应用:</div>
        </div>
        <div class="create-box">在线创建一个移动端应用，该应用包含多个数据展示组件，可用于APP、小程序等。
          <div class="path-box path-input-box">
            <el-button class="btn" type="primary" @click="createAppNext">创建</el-button>
          </div>
        </div>
        <!--配置页面展示组件-->
        <div class="title-box">
          <div class="item-title">修改已有应用:</div>
        </div>
        <div class="create-box">选择一个已有移动端应用，进行页面展示组件进行修改。
          <div class="path-box path-input-box">
            <el-button class="btn" type="primary" @click="appUpdate">下一步</el-button>
          </div>
        </div>
      </div>
      <!--创建crud配置-->
      <div class="body" v-if="designStep=='appConfig'">
        <!--配置页面访问地址-->
        <div class="title-box">
          <div class="item-title">请确认移动端应用信息</div>
        </div>
        <div class="path-box create-box">
          <span>应用名称</span>
          <el-tooltip content="【应用名称】在移动端展示的名称" placement="right">
            <i class="el-icon-question"></i>
          </el-tooltip>
        </div>
        <el-input v-model="appInfo.appName" placeholder="请输入应用名称"></el-input>

        <div class="path-box create-box">
          <span>用途描述</span>
          <el-tooltip content="【应用描述】简单描述当前应用的用途" placement="right">
            <i class="el-icon-question"></i>
          </el-tooltip>
        </div>
        <el-input type="textarea" :rows="4" v-model="appInfo.appDes" placeholder="请输入用途描述"></el-input>
        <div class="path-box path-input-box">
          <el-button class="btn" @click="createAppGoBack">上一步</el-button>
          <el-button class="btn" type="primary" @click="submitAddApp">提交</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'
import router from '@/router';
export default {
  name: "MobileDesignGuide",
  data() {
    return {
      //设计步骤
      designStep:'home',
      //页面配置信息
      appInfo:{
        appKey: '', //app唯一标识
        appName: '', //应用名称
        appDes:'',//描述
      }
    };
  },
  created() {

  },
  methods: {
    /** 修改移动端 */
    appUpdate() {
      const obj = { path: "/ysdApp/appBuild/editList", query: { t: Date.now() }};
      this.$tab.closeOpenPage(obj)
    },
    /** 创建移动端应用，进入下一步  */
    createAppNext(){
      this.designStep='appConfig'
    },
    /** 创建App模块，返回上一步  */
    createAppGoBack(){
      this.designStep='home'
    },
    /** 请求创建移动端应用  */
    submitAddApp(){
      if(!this.appInfo.appName.trim()){
        this.msgError("请输入应用名称");
        return;
      }
      if(!this.appInfo.appDes.trim()){
        this.msgError("请输入应用用途");
        return;
      }
      this.openLoading();
      request({
        url: "/generator/AppBuildInfo/add",
        method: "post",
        data: this.appInfo
      }).then(res => {
        if (res.code == 200) {
          this.$modal.msgSuccess(res.msg);
          let currentRoute = router.currentRoute;
          this.$tab.openPage(`移动端设计【${this.appInfo.appName}】`,"/ysdApp/appBuild/index/"+res.data.appKey,{});
          this.$tab.closePage(currentRoute);
        }else{
          this.msgError(res.msg);
        }
        //关闭加载框
        this.closeLoading();
      }).catch(err => {
        //关闭加载框
        this.closeLoading();
      });

    }
  },
};
</script>

<style scoped>

.app-container{
  display: flex;
  align-items: center;
  justify-content: center;
}

.guide-box{
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #f2f2f2;
  font-size: 16px;
  width: 600px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
  margin-bottom: 80px;
}

.guide-box > .content-title > .el-icon-guide{
  font-size: 40px;
}

.guide-box > .content-title {
  background-color: #304156;
  color: white;
  width: 100%;
  padding: 10px;
}

.guide-box > .content-title span {
  margin-left: 6px;
}



.guide-box > .body{
  padding: 30px;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.guide-box > .body .create{
  color: #11a983;
}
.guide-box > .body .create-box{
  margin: 10px 0;
  width: 100%;
}

.guide-box > .body .create:hover{
  cursor: pointer;
}

.guide-box > .body .path-box{
  display: flex;
  align-items: center;
}
.guide-box > .body .path-input-box{
  width: 100%;
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
/*.guide-box > .body .path-input-box .btn{*/
/*  margin-left: 10px;*/
/*}*/

.guide-box > .body .el-radio{
  margin-right:15px !important;
}


.body .title-box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #e1e1e1;
}

.body .title-box .icon{
  margin-left: 4px;
}

.body .title-box .item-title {
  font-weight: bold;
}

</style>
